<script>
import axios from "axios";
import addDialog from "./addDialog.vue";
import updateDialog from "./updateDialog.vue";
import permissionDialog from "./permissionDialog.vue"

export default {
  name: "Employee",
  components: {
    addDialog,
    updateDialog,
    permissionDialog
  },
  data() {
    return {
      filters: {
        name: ""
      },

      multipleSelection: [],
      users: [],
      listLoading: false,

      total: "",
      perPageSize: 10,
      currentPage: 1,

      addDialogFormShow: false,
      updateDialogFormShow: false,
      permissionDialogFormShow: false
    }
  },
  methods: {
    // loadList: function () {
    //   console.log("加载列表")
    //   this.$http.post().then()
    // },
    getDepartments() {
      let vue = this
      let requestParam = {
        currentPage: this.currentPage,
        perPageSize: this.perPageSize,
        keyWord: this.filters.name
      }
      console.log(requestParam)
      axios.post('http://localhost:8088/employees/keyWord', requestParam)
          .then(response => {
            // 请求成功时的处理逻辑
            console.log('Response:', response.data);
            vue.users = response.data.data
          })
          .catch(error => {
            // 请求失败时的处理逻辑
            if (error.response.status === 404) {
              console.error('Resource not found:', error.response.data); // 打印错误信息
            } else {
              console.error('Error:', error.response.data); // 其他错误情况
            }
          })
    },
    countListSize() {
      let vue = this
      console.log(vue)
      axios.get('http://localhost:8088/employees/selectPageSize')
          .then(response => {
            // 请求成功时的处理逻辑
            console.log('Response:', response.data);
            vue.total = response.data.data
          })
          .catch(error => {
            // 请求失败时的处理逻辑
            if (error.response.status === 404) {
              console.error('Resource not found:', error.response.data); // 打印错误信息
            } else {
              console.error('Error:', error.response.data); // 其他错误情况
            }
          })
    },
    loadList(val) {
      let vue = this
      let requestParam = {
        currentPage: val,
        perPageSize: this.perPageSize
      }
      axios.post("http://localhost:8088/employees/limitSelectAll", requestParam).then(response => {
        // 请求成功时的处理逻辑
        console.log('Response:', response.data);
        vue.users = response.data.data
      })
          .catch(error => {
            // 请求失败时的处理逻辑
            if (error.response.status === 404) {
              console.error('Resource not found:', error.response.data); // 打印错误信息
            } else {
              console.error('Error:', error.response.data); // 其他错误情况
            }
          })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ` + val);
      let vue = this
      vue.currentPage = val
      if (vue.filters.name === "") {
        let requestParam = {
          currentPage: val,
          perPageSize: this.perPageSize
        }
        axios.post("http://localhost:8088/employees/limitSelectAll", requestParam).then(response => {
          // 请求成功时的处理逻辑
          console.log('Response:', response.data);
          vue.users = response.data.data
        }).catch(error => {
          // 请求失败时的处理逻辑
          if (error.response.status === 404) {
            console.error('Resource not found:', error.response.data); // 打印错误信息
          } else {
            console.error('Error:', error.response.data); // 其他错误情况
          }
        })
      } else {
        vue.getDepartments()
      }
    },
    //添加对话框控制===============================================
    openAddDialog: function () {
      console.log("执行添加方法")
      this.addDialogFormShow = true;
    },
    closeAddDialog(data) {
      console.log('Received data from child:', data);
      this.addDialogFormShow = data;
    },
    //编辑对话框控制==================================================
    openUpdateDialog: function (a, b) {
      console.log("执行修改方法")
      console.log(a)
      this.rowData = b
      console.log(this.rowData.departmentName)
      this.updateDialogFormShow = true;
    },
    closeUpdateDialog(data) {
      console.log('Received data from child:', data);
      this.updateDialogFormShow = data;
    },
    openPermissionDialog(index, row) {
      this.permissionDialogFormShow = true;
    },
    closePermissionDialog(data) {
      this.permissionDialogFormShow = data;
    },
    //导出方法
    exportExcel() {
      let requestParam = this.users
      console.log(requestParam)
      axios.post("http://localhost:8088/employees/exportExcel", requestParam).then(response => {
        // 请求成功时的处理逻辑
        console.log('Response:', response.data);
        // vue.users = response.data.data
      }).catch(error => {
        // 请求失败时的处理逻辑
        if (error.response.status === 404) {
          console.error('Resource not found:', error.response.data); // 打印错误信息
        } else {
          console.error('Error:', error.response.data); // 其他错误情况
        }
      })
    },
    //多选框选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("执行")
      console.log(this.multipleSelection)
    },
    //批量导出
    toggleSelection(rows) {
      console.log("执行方法")
      let vue = this
      console.log(rows)
      let ids = []
      for (let i = 0; i < rows.length; i++) {
        ids[i] = rows[i].id
      }
      // axios({
      //   method: 'POST',
      //   url: 'http://localhost:8088/employees/exportExcelByIds', // 替换成实际的后端下载接口地址
      //   data: ids,
      //   responseType: 'blob' // 设置响应类型为 Blob
      // })

          axios.post('http://localhost:8088/employees/exportExcelByIds',ids,{responseType: 'blob' }).then(response => {
        // 请求成功时的处理逻辑
        // console.log('Response:', response.data);
        console.log('Response111111111111111111111111:', response);

        console.log("执行文件下载")
        // var a = JSON.parse(response.data)
        // console.log(a)
        // var excelData = JSON.stringify(response)
        // var excelData = JSON.parse(response)
        console.log(response)
        console.log(response.data)
        // console.log(excelData)

        // var excelData = JSON.stringify(response)
        // var excelData2 = JSON.stringify(response.data)
        // console.log("222222"+excelData)
        // console.log("333333"+excelData2)
        // console.log(response.config)
        var blob = new Blob([response.data], {type: 'application/vnd.ms-excel.sheet'});
        var url = URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = url;
        a.download = 'example.xlsx';
        document.body.appendChild(a);
        a.click();

        console.log("文件下载执行成功")

        vue.$refs.multipleTable.clearSelection();
      }).catch(error => {
        console.log(error)
      })
      // if (rows) {
      //   rows.forEach(row => {
      //     this.$refs.multipleTable.toggleRowSelection(row);
      //   });
      // } else {
      //   this.$refs.multipleTable.clearSelection();
      // }
    },
  },
  mounted() {
    this.countListSize()
    this.loadList(1)
  }
}
</script>

<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="部门名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getDepartments">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openAddDialog">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toggleSelection(multipleSelection)">批量导出</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table ref="multipleTable" :data="users" highlight-current-row v-loading="listLoading"
              @selection-change="handleSelectionChange"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="员工" width="60">
      </el-table-column>
      <el-table-column prop="username" label="员工姓名" width="120" sortable>
      </el-table-column>
      <el-table-column prop="email" label="员工邮箱" width="100" sortable>
      </el-table-column>
      <el-table-column prop="headImage" label="头像" width="100" sortable>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="120" sortable>
      </el-table-column>
      <el-table-column prop="departmentId" label="部门id" min-width="180" sortable>
      </el-table-column>
      <el-table-column label="操作" width="225">
        <template slot-scope="scope">
          <el-button size="small" @click="openPermissionDialog(scope.$index, scope.row)">权限</el-button>
          <el-button size="small" @click="openUpdateDialog(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!--      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-button type="danger" @click="batchRemove" :disabled="0">批量删除</el-button>
      <!--      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">-->
      <!--      </el-pagination>-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="perPageSize"
          :page-size="perPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="float:right;">
      </el-pagination>
    </el-col>

    <!--    权限对话框-->
    <permission-dialog :dialog-form-show="permissionDialogFormShow" @closeDialog="closePermissionDialog"
                       @refresh="refreshList"></permission-dialog>

    <!--    添加对话框-->
    <add-dialog :dialog-form-show="addDialogFormShow" @closeDialog="closeAddDialog" @refresh="refreshList"></add-dialog>

    <!--    编辑对话框-->
    <update-dialog :rowData="rowData" :dialog-form-show="updateDialogFormShow" @closeDialog="closeUpdateDialog"
                   @refresh="refreshList"></update-dialog>

  </section>
</template>

<style scoped>

</style>